<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    body {
      background-color: grey;
    }
    .red {
      background-color: red;
      height: 100px;
      margin-top: 100px;
    }
    .orange {
      background-color: orange;
      height: 100px;
      overflow: hidden;
      /* border-top: 1px solid; */
      /* padding-top: 33px; */
    }
    .yellow {
      background-color: yellow;
      margin-top: 33px;
      height: 33px;
      width: 33px;
    }
    </style>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="red"></div>
    <div class="orange">
      <div class="yellow">
        
      </div>
    </div>
    下面两方法，可以解决“内部div设置上外边距，导致父级div坍塌”问题
    <ul>
      <li>overflow: hidden;</li>
      <li>border-top: 1px solid;</li>
    </ul>
    
    改成父级div的 padding-top: 33px;写法也可实现相同效果

  </body>
</html>
